<template>
    <div>
        <div class="el-descriptions">
            <div class="el-descriptions__header">
                <div class="flex">
                    <div class="el-descriptions__title">
                        装备评价（{{ total }}条）
                    </div>
                    <el-rate v-if="score>0" :value="score" :max="5" show-score disabled text-color="#F6C420" score-template="{value}"></el-rate>
                </div>

                <div class="el-descriptions__extra">
                    <el-button type="danger" icon="el-icon-edit"
                        @click="$refs.evaluateDialog.dialogVisible = true">我要评价</el-button>
                </div>
            </div>
        </div>
        <div class="mt-30" v-loading="loading">
            <div class="evaluate-item" v-for="item in list" :key="item.id">
                <el-row :gutter="30">
                    <el-col :span="2">
                        <el-avatar :size="60" :src="item.avatar" lazy></el-avatar>
                    </el-col>
                    <el-col :span="22">
                        <div class="evaluate-item__title flex">
                            <span class="username">普通用户</span>
                            <el-rate :value="item.score" disabled show-score text-color="#ff9900" :max="5">
                            </el-rate>
                        </div>
                        <div class="evaluate-item__content">
                            <p><strong>优点：</strong>{{ item.pros }}</p>
                            <p><strong>缺点：</strong>{{ item.cons }}</p>
                        </div>
                        <div class="evaluate-item__pics">
                            <el-image :size="120" v-for="(item, index) in item.images" :key="index" :src="item.pic"
                                lazy></el-image>
                        </div>
                        <div class="evaluate-item__footer flex space-between">
                            <div>
                                <span>购买时间：{{ item.buy_time }}</span>
                                <span>购买地址：{{ item.buy_address }}</span>
                            </div>
                            <div class="operate">
                                <span><i class="el-icon-chat-dot-square"></i>评论</span>
                                <span :class="{ 'text-red': item.is_zan === true }" @click="dianzan(item)"><i class="el-icon-thumb"></i>点赞</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-empty description="暂无装备评价" v-if="isEmpty"></el-empty>

            <div class="text-center mt-30">
                <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                    :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]" layout="total, prev, pager, next"
                    :total="total" hide-on-single-page>
                </el-pagination>
            </div>
        </div>

        <evaluateDialog ref="evaluateDialog" @refresh="pushToData" />
    </div>
</template>

<script>
import { getSpuEvalList, getAddSpuForumEvalZan } from '@/api/apis'
import evaluateDialog from './evaluateDialog.vue'
export default {
    name: "evaluate",
    components: {
        evaluateDialog
    },
    data () {
        return {
            score: 0, // 评分
            loading: true,
            list: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
            }
        }
    },
    mounted () {
        this.total === 0 && this.getList();
    },
    methods: {
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        getList (){
            let that = this;
            that.loading = true;
            getSpuEvalList({
                goods_id: that.$route.params.id
            }).then(res => {
                if (res.code === 1) {
                    that.list = res.data.data.data
                    that.total = res.data.data.total
                    that.params.pagesize = Number(res.data.data.per_page)
                    that.params.lastPage = res.data.data.last_page
                    that.isEmpty = !that.list.length
                    that.score = Number(res.data.score) || 0
                } else {
                    that.$message.error(res.msg)
                }
            })
            that.loading = false;
        },
        // 点赞
        dianzan(item){
            if (item.is_zan) return this.$message.info('您已赞过了');
            getAddSpuForumEvalZan({
                fe_id: item.id,
                type: 2
            }).then(res => {
                if (res.code === 1) {
                    this.$message.success(res.msg)
                    item.is_zan = 1;
                    this.$forceUpdate()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        pushToData(data){
            this.list.unshift(data)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-descriptions__header {
    height: 62px;

    margin-bottom: 0;
    background-color: rgba(46, 48, 51, .05);

    .el-descriptions__title {
        text-indent: 30px;
    }

    .el-descriptions__extra {
        margin-right: 15px;
    }
}

.evaluate-item {
    padding-top: 30px;
    overflow: hidden;

    &__title {
        .username {
            color: #2E3033;
            font-size: 16px;
            margin-right: 10px;
        }
    }

    &__content {
        margin-top: 15px;
        font-size: 14px;
        color: #2E3033;

        p {
            line-height: 1.6;
            margin-bottom: 5px;
        }
    }

    &__pics {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 10px;

        .el-image {
            width: 60px;
            height: 60px;
            border-radius: 5px;
        }
    }

    &__footer {
        font-size: 14px;
        color: rgba(46, 48, 51, .6);

        span {
            &+span {
                margin-left: 30px;
            }

            i {
                margin-right: 5px;
            }
        }

        .operate {
            span {
                cursor: pointer;

                &:hover {
                    color: rgba(46, 48, 51, 1);
                }
            }
        }
    }

    .el-col-22 {
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(46, 48, 51, .1)
    }
}
</style>